<template>
  <div class="ebook-reader">
    <!-- 展示电子书 -->
    <div id="read"></div>
  </div>
</template>

<script>
// 引入localStore文件
import { getFontFamily, saveFontFamily } from '../../utils/localStorage'
// 引入 epubjs
import Epub from "epubjs";
// 设置全局 epub 对象(报错再设置)
global.ePub = Epub;

// 引入mapActions快速调用vuex中的action中的方法
// mapActions一般在 methods 中混入
// import { mapActions } from 'vuex'
// mapActions在多个页面中引用, 抽离成一个单独的页面actions.js
// import { ebookMixin } from '../../utils/mixin'

// 引入mapGeters快速调用vuex中的state中的属性
// import { mapGetters } from 'vuex'
// mapGetters一般在computed属性中混入
// mapGetters在多个页面中引用, 抽离成一个单独的页面getters.js
// 此时, 使用vue特性mixin以数组的方式引用 mixin.js 中 export的内容
import { ebookMixin } from "../../utils/mixin";
export default {
  // vue特性
  mixins: [ebookMixin],
  methods: {
    // 混入 mapActions
    // ...mapActions(['setMenuVisible']),
    // 上一页
    prevPage() {
      // rendertion方法自带属性
      if (this.rendition) {
        this.rendition.prev();
      }
      // 翻页时触发, 菜单栏隐藏
      this.hideTitleAndMenu();
    },
    // 下一页
    nextPage() {
      if (this.rendition) {
        this.rendition.next();
      }
      // 翻页时触发, 菜单栏隐藏
      this.hideTitleAndMenu();
    },
    // 呼唤菜单栏
    toggleTitleAndMenu() {
      this.setMenuVisible(!this.menuVisible);
      // settingVisible必须在菜单栏呼出时才能显示
      this.setSettingVisible(!this.menuVisible);
      // 字体选择栏
      this.setFontFamilyVisible(!this.menuVisible);
      console.log(this.menuVisible, this.fontFamilyVisible);
    },

    hideTitleAndMenu() {
      // 此函数触发时, 上下菜单栏隐藏
      //  this.$store.dispatch('setMenuVisible', false)
      this.setMenuVisible(false);
      //  此函数触发时, setSettingvisible隐藏
      this.setSettingVisible(false);
    },

    // 页面初始化
    initEpub() {
      // 设置 nginx 服务器的路径
      const url = "http://localhost:6061/epub/" + this.fileName + ".epub";
      // console.log(url);
      // 电子书(使用Epub实例化)
      console.log(url);
      this.book = new Epub(url);
      this.setCurrentBook(this.book);
      // 渲染电子书
      this.rendition = this.book.renderTo("read", {
        width: innerWidth,
        height: innerHeight,
        method: "default",
      });
      this.rendition.display().then(() => {
        // 通过getFontFamily获取
        let font = getFontFamily(this.fileName)
        // 如果不存在, 直接设置
        if (!font) {
          // this.defaultFontFamily 在vuex中定义了
          saveFontFamily(this.fileName, this.defaultFontFamily)
        } else {
          // 如果存在, 直接赋值
          this.rendition.themes.font(font)
        }
        // 刷新后保存对之前选择的更改
        this.setDefaultFontFamily(font)
      })

      // 翻页功能
      // epub 提供了一个on方法, 可以将事件绑定到 ifream 上
      this.rendition.on("touchstart", (event) => {
        //   console.log(event);
        // 获取点击时x轴的距离
        this.touchStartX = event.changedTouches[0].clientX;
        // 获取点击时间
        this.touchStartTime = event.timeStamp;
      });
      this.rendition.on("touchend", (event) => {
        //   console.log(event.changedTouches[0].clientX);
        // 计算离开时的偏移量
        // console.log(1);
        const offsetX = event.changedTouches[0].clientX - this.touchStartX;
        // 计算离开时的时间
        const time = event.timeStamp - this.touchStartTime;
        // 限定手势操作的触发条件
        if (time < 500 && offsetX > 40) {
          // 进入上一页(调用)
          this.prevPage();
        } else if (time < 500 && offsetX < -40) {
          // 进入下一页(调用)
          this.nextPage();
        } else {
          // 呼唤菜单栏(调用)
          this.toggleTitleAndMenu();
        }
        // 禁止默认事件以及冒泡
        // event.preventDefault();
        event.stopPropagation();
      });
      this.rendition.hooks.content.register((contents) => {
        // 字体文件放入 nginx 资源文件中, 通过ip地址引入
        // contents.addStylesheet 返回一个 Promise 对象
        // 可以在全部加载完成后调用 Promise.all 来做一些事
        Promise.all([
          // 本地开发地址, 发布到线上后可能会找不到,
          // 这时需要通过 env.development 文件进行配置
          // 所以 ip 地址被抽象成一个变量了
          // 注意环境变量需要在项目运行时一次性加载, 所以只要更改了环境变量, 就要重新启动系统
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/cabin.css`),
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/montserrat.css`),
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`),
        ]).then(()=>{
          console.log('字体全部加载完毕');
        });
      });
    },
  },
  mounted() {
    // 接受动态路由
    this.setFileName(this.$route.params.fileName.split("|").join("/")).then(
      () => {
        this.initEpub();
      }
    );
  },
};
</script>

<style>
</style>